<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>云南公安网安大数据安全监管平台</title>
  <link rel="stylesheet" href="../../assets/css/uikit.css">
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="../../assets/icons/style.css">
  <script src="../../scripts/jquery-1.11.3.min.js"></script>
  <script src="nav.js"></script>
  <script src="../../scripts/plugins/jquery.icheck.min.js"></script>
  <script src="../../scripts/plugins/jquery.tablesort.min.js"></script>
  <script src="../../scripts/plugins/jquery.ztree.all.min.js"></script>
  <script src="../../scripts/plugins/jquery.mCustomScrollbar.concat.min.js"></script>
  <script src="../../scripts/plugins/select2.min.js"></script>
</head>
<body class="sys-body" style="overflow:hidden;">
  <div class="sys-header">
    <div class="sys-logo">
      <h1>云南公安网安大数据安全监管平台</h1>
    </div>

    <div class="sys-menu" id="sys-menu">
      <ul>
        <li>loading......</li>
      </ul>
      <div class="curLine"></div>
    </div>
    <div class="sys-topbar">
      <img src="../../assets/images/_userphoto.png"><span><a href="javascript:void(0);">Admin</a><a href="javascript:void(0);"> 【注销】</a></span>
    </div>
  </div>

  <div class="sys-sidebar">
    <div class="toggle-sidebar"><i class="icon-toleft"></i></div>
    <ul>
      <li><a href="data-resource.html"><i class="icon-explore"></i><span>资源状态概览</span></a><em class="open"></em>
        <ul>
          <li><a href="data-resource.html">资源概览</a></li>
        </ul>
      </li>

      <li> <a href="data-laws.html"><i class="icon-db-search"></i><span>高级分析</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-flow.html">数据流向分析</a></li>
          <li><a href="data-userlaw.html">使用规律分析</a></li>
        </ul>
      </li>

      <li> <a href="data-riskevent..html"><i class="icon-db-search"></i><span>事件</span></a><em class="open"></em>
        <ul>
          <li> <a href="data-riskevent.html">事件</a></li>
        </ul>
      </li>

      <li class="active"> <a href="data-resourceconfig.html"><i class="icon-notifications-on"></i><span>数据资源管理</span></a><em class="open"></em>
        <ul>
          <li class="active"><a href="data-resourceconfig.html">数据资源配置</a></li>
          <li><a href="data-ipconfig.html">参数配置</a></li>
        </ul>
      </li>
    </ul>
  </div>

  <div class="sys-main" id="sys-main">
    <div class="sys-title">
      <h2>数据资源配置 - XX库</h2>
      <div class="alink"><a href="javascript:void(0);" onclick="javascript:history.go(-1)"><i class="icon-reply"></i>返回</a></div>
    </div>

    <div class="sys-content">
      <div class="panel">
        <div class="panel-head">
          <div class="panel-title">
            <h3>告警列表</h3>
          </div>
          <div class="btnbar dropdown">
           <button class="btn btn-success">告警配置</button>
           <ul class="dropdown-menu">
            <li><i class="icon-security"  id="add"></i><span>风险操作告警</span></li>
<!--             <li><i class="icon-db-del"></i><span>数据库连接失败</span></li>
  <li><i class="icon-notifications-on"></i><span>脱敏异常告警</span></li> -->
</ul>
</div>

<div class="filter">
  <select>
    <option value="等级">等级</option>
  </select>
  <select>
    <option value="启用状态">启用状态</option>
  </select>
  <input type="text" placeholder="请输入关键词查询">
  <button class="btn">检索</button>
</div>
</div>
<div class="panel-body">


  <table class="table table-striped">
    <thead>
      <tr>
        <th width="3%"><input type="checkbox"></th>
        <th width="5%">序号</th>
        <th>名称</th>
        <th>风险级别</th>
        <th>修改时间</th>
        <th>状态</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" disabled></td>
        <td>1</td>
        <td><a href="javascript:void(0);">全库高危操作</a></td>
        <td><span class="badge fc-danger">高</span></td>
        <td>2017-08-25 09:21:35</td>
        <td><label class="toggle" title="启用/停用"><input type="checkbox" checked disabled><span class="handle"></span></label></td>
        <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>2</td>
        <td><a href="javascript:void(0);">特殊操作</a></td>
        <td><span class="badge fc-danger">高</span></td>
        <td>2017-08-25 09:21:35</td>
        <td><label class="toggle" title="启用/停用"><input type="checkbox" checked><span class="handle"></span></label></td>
        <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>3</td>
        <td><a href="javascript:void(0);">其他操作</a></td>
        <td><span class="badge fc-danger">高</span></td>
        <td>2017-08-25 09:21:35</td>
        <td><label class="toggle" title="启用/停用"><input type="checkbox" checked><span class="handle"></span></label></td>
        <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>4</td>
        <td><a href="javascript:void(0);">zhangsan</a></td>
        <td><span class="badge fc-warning">中</span></td>
        <td>2017-08-25 09:21:34</td>
        <td><label class="toggle" title="启用/停用"><input type="checkbox" checked><span class="handle"></span></label></td>
        <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>5</td>
        <td><a href="javascript:void(0);">lijuan</a></td>
        <td><span class="badge">低</span></td>
        <td>2017-08-25 09:21:35</td>
        <td><label class="toggle" title="启用/停用"><input type="checkbox"><span class="handle"></span></label></td>
        <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>6</td>
        <td><a href="javascript:void(0);">admin</a></td>
        <td><span class="badge fc-danger">高</span></td>
        <td>2017-08-25 09:21:35</td>
        <td><label class="toggle" title="启用/停用"><input type="checkbox"><span class="handle"></span></label></td>
        <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>7</td>
        <td><a href="javascript:void(0);">accAdmin</a></td>
        <td><span class="badge fc-danger">高</span></td>
        <td>2017-08-25 09:21:35</td>
        <td><label class="toggle" title="启用/停用"><input type="checkbox"><span class="handle"></span></label></td>
        <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>8</td>
        <td><a href="javascript:void(0);">anyAdmin</a></td>
        <td><span class="badge fc-danger">高</span></td>
        <td>2017-08-25 09:21:34</td>
        <td><label class="toggle" title="启用/停用"><input type="checkbox"><span class="handle"></span></label></td>
        <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>9</td>
        <td><a href="javascript:void(0);">zhangsan</a></td>
        <td><span class="badge fc-danger">高</span></td>
        <td>2017-08-25 09:21:32</td>
        <td><label class="toggle" title="启用/停用"><input type="checkbox"><span class="handle"></span></label></td>
        <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
      </tr>
      <tr>
        <td><input type="checkbox"></td>
        <td>10</td>
        <td><a href="javascript:void(0);">lijuan</a></td>
        <td><span class="badge fc-danger">高</span></td>
        <td>2017-08-25 09:20:30</td>
        <td><label class="toggle" title="启用/停用"><input type="checkbox"><span class="handle"></span></label></td>
        <td class="icons"><a href="javascript:void(0);"  title="修改"><i class="icon-setting"></i></a><a href="javascript:void(0);" title="删除"><i class="icon-delete"></i></a></td>
      </tr>
    </tbody>
  </table>
</div><!--panel-body end-->
<div class="panel-foot">
  <div class="btns"><button class="btn btn-danger">批量删除</button></div>
  <div class="page">
    <ul class="pagination">
      <li class="disabled"><a href="javascript:void(0);">&lt;</a></li>
      <li class="active"><a href="javascript:void(0);">1</a></li>
      <li><a href="javascript:void(0);">2</a></li>
      <li><a href="javascript:void(0);">3</a></li>
      <li><a href="javascript:void(0);">4</a></li>
      <li><a href="javascript:void(0);">5</a></li>
      <li><a href="javascript:void(0);">&gt;</a></li>
      <li class="go"><input type="text" title="输入页码跳转"></li>
    </ul>
  </div>
</div><!--panel-foot end-->
</div>
</div>
</div>

<div class="dialog dialog-sm">
  <div class="dialog-win">
    <div class="dialog-head"><span>新增告警规则</span><a class="close" href="javascript:void(0);"><i class="icon-close"></i></a></div>
    <div class="dialog-body">

      <div class="step step-col3">
        <ul>
          <li class="active"><strong>1</strong><span>基本信息</span></li>
          <li><strong>2</strong><span>告警数据</span></li>
          <li><strong>3</strong><span>告警条件</span></li>
        </ul>
      </div>


      <div class="step-box" style="display:block;">
       <div class="form-item">
        <div class="form-title"><em class="fc-danger">*</em>告警名称：</div>
        <div class="form-content"><input class="long"  type="text"></div>
      </div>
      <div class="form-item">
        <div class="form-title"><em class="fc-danger">*</em>风险级别：</div>
        <div class="form-content"><label><input type="checkbox">高</label><label><input type="checkbox">中</label><label><input type="checkbox">低</label><label><input type="checkbox" id="yb">一般</label></div>
      </div>
      <div class="form-item">
        <div class="form-title">规则生效：</div>
        <div class="form-content"><label><input type="checkbox" checked>启用告警</label></div>
      </div>
      <div class="form-item" id="ybitem1">
        <div class="form-title">告警方式：</div>
        <div class="form-content"><label><input type="checkbox">邮件</label><label><input type="checkbox">大屏显示</label></div>
      </div>
      <div class="form-item" id="ybitem2">
        <div class="form-title">收件人：</div>
        <div class="form-content">
          <select class="full select2 email" multiple  style="width:565px">
            <option value="1">张三 <zhangs@ynga.com></option>
            <option value="2">张思 <zhangs2@ynga.com></option>
            <option value="3">张思 <zhangs3@ynga.com></option>
          </select>
        </div>
      </div>
      <div class="form-btn">
       <button class="btn">下一步</button>
     </div>
   </div>


   <div class="step-box scrollbar"  style="padding:0 100px;height:260px;">
    <ul id="dblist" class="ztree box ">
    </ul>
    <div class="form-btn">
     <button class="btn btn-minor">上一步</button> <button class="btn">下一步</button>
   </div>
 </div>

 <div class="step-box">
   <div class="form-item-group">
    <strong class="form-item-group-title">告警条件</strong>
    <button class="btn btn-sm delete" title="删除"><i class="icon-trashcan"></i></button>
    <div class="form-item">
      <div class="form-title">操作类型：</div>
      <div class="form-content">
        <select class="full select2" multiple style="width:480px">
          <option value="1">查询类</option>
          <option value="2">修改类</option>
          <option value="3">新增类</option>
          <option value="4">删除类</option>
        </select>
      </div>
    </div>
    <div class="form-item">
      <div class="form-title">客户端IP：</div>
      <div class="form-content">
        <select  style="width:17%">
          <option value="1">等于</option>
          <option value="2">不等于</option>
        </select>
        <select class="select2" multiple style="width:377px">
          <option value="1">HBASE黑名单</option>
          <option value="2">ORACEL白名单</option>
          <option value="3">数据中心管理员IP名单</option>
        </select>
      </div>
    </div>
    <div class="form-item">
      <div class="form-title">时间规则：</div>
      <div class="form-content">
        <select  class="full select2" multiple style="width:480px">
          <option value="1">每天</option>
          <option value="2">每周一</option>
          <option value="2">每周二</option>
          <option value="2">每周三</option>
          <option value="2">每周四</option>
          <option value="2">每周五</option>
          <option value="2">每周六</option>
          <option value="2">每周日</option>
        </select>
        <p><input type="text"  placeholder="开始时间"> ~ <input  type="text"  placeholder="结束时间"></p>
      </div>
    </div>
  </div>

  <div  id="new" style="display:none">
    <div class="form-item-group">
      <strong class="form-item-group-title">告警条件</strong>
      <button class="btn btn-sm delete" title="删除"><i class="icon-trashcan"></i></button>
      <div class="form-item">
        <div class="form-title">操作类型：</div>
        <div class="form-content">
          <select class="full select2" multiple style="width:480px">
            <option value="1">查询类</option>
            <option value="2">修改类</option>
            <option value="3">新增类</option>
            <option value="4">删除类</option>
          </select>
        </div>
      </div>
      <div class="form-item">
        <div class="form-title">客户端IP：</div>
        <div class="form-content">
          <select  style="width:17%">
            <option value="1">等于</option>
            <option value="2">不等于</option>
          </select>
          <select class="select2" multiple style="width:377px">
            <option value="1">审计员IP</option>
            <option value="2">情报中心IP</option>
            <option value="3">数据中心管理员IP名单</option>
          </select>
        </div>
      </div>
      <div class="form-item">
        <div class="form-title">时间规则：</div>
        <div class="form-content">
          <select  class="full select2" multiple style="width:480px">
            <option value="1">每天</option>
            <option value="2">每周一</option>
            <option value="2">每周二</option>
            <option value="2">每周三</option>
            <option value="2">每周四</option>
            <option value="2">每周五</option>
            <option value="2">每周六</option>
            <option value="2">每周日</option>
          </select>
          <p><input type="text"  placeholder="开始时间"> ~ <input  type="text"  placeholder="结束时间"></p>
        </div>
      </div>
    </div>
  </div>
  <div class="form-item">
    <div class="form-title"></div>
    <div class="form-content">
      <button class="btn btn-sm btn-minor" id="newbtn">添加告警条件</button></div>
    </div>
    <div class="form-btn">
      <button class="btn btn-minor">上一步</button> <button class="btn">保存</button>
    </div>
  </div>

</div>
</div>
</div>
<!--dialog end-->


</body>
</html>
<script>

  (function($){
    $(window).load(function(){
      $(".dialog-body").mCustomScrollbar({
        autoHideScrollbar:true,
        advanced:{
          autoExpandHorizontalScroll:true
        }
      });
    });
  })(jQuery);

  $(document).ready(function(){
    $(".scrollbar").mCustomScrollbar({
      autoHideScrollbar:true,
      advanced:{
        autoExpandHorizontalScroll:true
      }
    });

    $(".dropdown-menu li:eq(0)").on("click",function(){
      console.log($(this).parents(".open"));
      $(this).parents(".open").removeClass('open');
      $(".dialog").show();
    })

    $(".dialog .close,#cancel").on("click",function(){
      $(".dialog").hide();
    })

    $(".dropdown").on("click", "button", function() {
      $(this).parent().hasClass('open') ? $(this).parent().removeClass('open') : $(this).parent().addClass('open');
    })

    /*选项卡*/
    $(".step").on("click", "li", function() {
     $(this).siblings().removeClass('active').end().addClass('active');
     $(".step-box").hide().eq($(this).index()).show();
   })

    $.fn.zTree.init($("#dblist"), setting, zNodes);


    $("#yb").on('ifChanged', function () {
  if ($(this).is(':checked')) {//就是这么简单
    $("#ybitem1,#ybitem2").hide();
  }else{
    $("#ybitem1,#ybitem2").show();
  }
});

    $("#newbtn").click(function() {
      $("#new").before($("#new").html());
    });

    $(".step-box").on("click",".delete",function(){
      if($(".form-item-group").length>2){ $(this).parents(".form-item-group").remove();}
    })

    $('.email').select2({
      multiple: true,
      tags: true
    });

  })


var setting = {
  check: {
    enable: true
  },
  data: {
    simpleData: {
      enable: true
    }
  }
};

var zNodes =[
{ id:1, pId:0, name:"DBPPOTAL", open:true},
{ id:11, pId:1, name:"T-USERINFO"},
{ id:12, pId:1, name:"T-LOG"},
{ id:13, pId:1, name:"T-LOGIN"},
{ id:14, pId:1, name:"T-IP-INFO"},

{ id:2, pId:0, name:"DB-WEBSITE"},
{ id:21, pId:2, name:"T-DB-NEW"},
{ id:22, pId:2, name:"T-DB-2016"},
{ id:23, pId:2, name:"T-DB-INFO2016-TEMP"},

{ id:3, pId:0, name:"DB-WASKL"},
{ id:31, pId:3, name:"T-SQMSL"},
{ id:32, pId:3, name:"T-SMQXH-JSK"},
{ id:33, pId:3, name:"T-BMSL-ZSJD"},

{ id:4, pId:0, name:"DB-ORACL-DJS"},
{ id:41, pId:4, name:"T-SKA"},
{ id:42, pId:4, name:"T-ZJSL2"},
{ id:43, pId:4, name:"T-Z,MWNZ"},
{ id:44, pId:4, name:"T-MBMSA"},
];

</script>